<template>
<div class="app-container">
    <!-- 第一排搜索卡片 -->
    <el-card class="box-card">
      <el-row style="font-size: 15px; line-height: 2em; color: #909399" :gutter="60">
        
        <el-col :span="24">
          <el-form >
            <el-col :span="12">
              <div class="search">
                <div style="float: left">
                培训名称:<el-input
                          v-model="itemtitle"
                          placeholder="请输入内容"
                          style="width: 50%"
                        ></el-input>
                </div>
                <div style="float: left">
                        <el-button
                          type="primary"
                          icon="el-icon-search"
                          @click="search"
                          >搜索</el-button
                        >
                      </div>
              </div>
              
            </el-col>
            <el-table :data="planschedule" style="width: 100%" :header-cell-style="{'text-align':'center'}"
          :cell-style="{'text-align':'center'}">
          <el-table-column label="培训标题">
            <template slot-scope="scope">
              <span>{{ scope.row.planTitle }}</span>
            </template>
          </el-table-column>
          <el-table-column label="需求部门">
            <template slot-scope="scope">
              <span>{{ scope.row.planFor }}</span>
            </template>
          </el-table-column>
          <el-table-column label="收集部门">
            <template slot-scope="scope">
              <span>{{ scope.row.planCollect }}</span>
            </template>
          </el-table-column>
          <el-table-column label="发布人">
            <template slot-scope="scope">
              <span>{{ scope.row.pubulisher }}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
               <!-- 查看详情 -->
                      <el-popover placement="left" width="800" trigger="click">
                        <el-form>
                          <el-form-item label="计划标题:">
                            <span>{{ plandetail.planTitle }}</span>
                          </el-form-item>
                          <el-form-item label="需求部门:">
                            <span>{{ plandetail.planFor }}</span>
                          </el-form-item>
                          <el-form-item label="收集部门:">
                            <span>{{ plandetail.planCollect }}</span>
                          </el-form-item>
                          <el-form-item label="总预算:">
                            <span>{{ plandetail.planMoney }}</span>
                          </el-form-item>
                          <el-form-item label="计划详情:">
                            <span><a :href="plandetail.planContent" :download="plandetail.planContent" >点击下载</a></span>
                          </el-form-item>
                          <el-form-item label="发布人:">
                            <span>{{ plandetail.pubulisher }}</span>
                          </el-form-item>
                          <el-form-item label="发布时间:">
                            <span>{{ (plandetail.planStarttime || "").split("T")[0] }}</span>
                          </el-form-item>
                          <el-form-item label="审核进度:" v-if="plandetail.etmsApproveRecord != null">
                            <span>当前审核人:{{ plandetail.etmsApproveRecord.approver }}</span>
                            <span style="margin-left:20px">截止时间:{{(plandetail.etmsApproveRecord.approveEndtime || "").split("T")[0]}}</span>
                          </el-form-item>
                          <el-form-item label="计划状态:" v-show="plandetail.etmsApproveRecord == null">
                            <span style="color:green" v-show="plandetail.planPass == 'y'">已通过审核</span>
                            <span style="color:red" v-show="plandetail.planPass == 'n'">未通过审核</span>
                          </el-form-item>

                        </el-form>

                        <el-button
                          size="mini"
                          slot="reference"
                          @click="planSchedule(scope.row.planId)"
                          
                          >查看详情</el-button
                        >
                      </el-popover>
              
            </template>
          </el-table-column>
        </el-table>
          </el-form>
        </el-col>
      </el-row>
      <div class="block">
                  <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page.sync="currentPage3"
                    :page-size="5"
                    layout="prev, pager, next, jumper"
                    :total="total"
                  >
                  </el-pagination>
                </div>
    </el-card>
</div>
  <!-- <el-popover
    placement="right"
    width="800"
    trigger="click"
    style="height: 800px"
  >
    <div style="height: 500px">
      <div
        v-show="planschedule.length == 0"
        style="height: 100%; text-align: center; line-height: 500px"
      >
        无内容
      </div>
      <div v-for="plan in planschedule" :key="plan">
        <el-card class="box-card" style="margin-bottom: 10px">
          <div slot="header" class="clearfix">
            <span style="font-size: 20px">培训计划</span>
            <div
              style="float: right; padding: 3px 0"
              v-show="plan.approver !== null"
            >
              审批人:{{ plan.approver }}
            </div>
            <div
              style="float: right; padding: 3px 0"
              v-show="plan.approver !== null"
            >
              当前进度:审批中
            </div>
            <div
              style="float: right; padding: 3px 0"
              v-show="plan.approver === null"
            >
              已审核
            </div>
          </div>
          <div style="clear: both; float: left">
            计划标题:{{ plan.planTitle }}
          </div>

          <div style="float: right">发起时间{{ plan.planStarttime }}</div>
        </el-card>
      </div>
    </div>
    <el-button slot="reference" @click="findMyApproved">已审核</el-button>
  </el-popover> -->

</template>
<script>
import { findAllPlan } from "@/api/plan";
import { findBySelect } from "@/api/plan";
import { findAllDept } from "@/api/plan";
import { findPlanSchedule } from "@/api/plan";
import {findMyApproved} from '@/api/plan';
import {findMyApproveNow} from '@/api/plan';
import {findPlanDetail} from '@/api/plan';
export default {
  data() {
    return {
      planschedule: [], //审批进度显示
      planList: [],
      currentPage: 1,
      itemSum: "0",
      total: 0,
      currentPage3: 1,
      depts: [],
      itemtitle: "",
      options: [
        {
          value: "",
          label: "不限",
        },
        {
          value: "n",
          label: "未审核",
        },
        {
          value: "y",
          label: "已审核",
        },
      ],
      Svalue: "",
      formInLine: {
        page: 1,
        id: 1,
        limit: 10,
        radio: 1,
      },
       pro:{
          id: '12987122',
          name: '好滋好味鸡蛋仔',
          category: '江浙小吃、小吃零食',
          desc: '荷兰优质淡奶，奶香浓而不腻',
          address: '上海市普陀区真北路',
          shop: '王小虎夫妻店',
          shopId: '10333'
        },
        plandetail: {
        etmsApproveRecord:{
          approver:""
        }
      },
    };
  },
  created() {
    this.getdata();
  },
  methods: {
    getdata(){
      this.userId = this.$store.getters.userId;
      findMyApproved({
        uid:this.userId,
        title:this.itemtitle,
        startPage:1
      }).then((res) => {
        console.log(res);
        this.planschedule = res.data.list;
      }).catch();
    },
    findMyApproveNow() {
      findMyApproveNow(1).then((res) => {
        console.log(res);
        this.planschedule = res.data;
      }).catch;
    },
    // 搜索
    search(val) {
  
         findMyApproved({
        uid:this.userId,
        title:this.itemtitle,
        startPage:1
      }).then((res) => {
        console.log(res);
        this.planschedule = res.data.list;
      }).catch();
      
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      findMyApproved({
        uid:this.userId,
        title:this.itemtitle,
        startPage:1
      }).then((res) => {
        console.log(res);
        this.total = res.data.total;
        this.planschedule = res.data.list;
      }).catch();
    },
    planSchedule(planId) {
      
      findPlanDetail(planId).then((res) => {
        console.log(res);
        this.plandetail = res.data;
        console.log(this.plandetail)
      }).catch;
    },
  },
};
</script>
<style scoped>
  .el-input {
    width: 250px;
  }

  .box-item {
    width: 75%;
    float: right;
  }

  .field-label {
    vertical-align: middle;
  }

  .box-card {
    width: 98%;
    max-width: 100%;
    margin: 20px auto;
  }

  .search {
    margin-top: 10px;
    width: 100%;
    display: flex;
    font-size: 15px;
    line-height: 50px;
  }
a:link {
    color:#1100ff;
    text-decoration:underline;
}
    
a:hover {
    color:#8a132d;
    text-decoration:none;
    }
    
a:active {
    color:#FFFFFF;
    text-decoration:none;
}
</style>
